﻿@{
    bool loadJs = ViewBag.LoadJs;
}
@if (loadJs)
{
    <script src="~/Scripts/jquery-easyui-extensions/window/jeasyui.fixeds.window.cls.js"></script>
}
<style>
    .test1 {
        border-bottom-color: red;
    }

    .test2 {
        border-bottom-color: red !important;
    }
</style>
<div class="easyui-panel" data-options="fit:true,title:'普通的 panel ',headerCls:'test1',bodyCls:'test2'">
    <div class="easyui-window" data-options="title:'普通的 window',closed:false,headerCls:'test1',bodyCls:'test2'" style="height: 400px; width: 360px; padding: 5px;">
        本页面中已定义“名为 test1、test2 的样式，这两个样式均控制 底部边框颜色为红色”。
        <br /><br />
        <span style="color:red;">本页面初始化时 @(loadJs?" [已经] ":" [尚未] ") 载入 cls 的扩展脚本。</span>
        <br /><br />
        将 test1 样式设置给外层 easyui-panel 的 headerCls 属性，是有效的，观察外层 easyui-panel 的 header 底部边框。
        <br />
        同时将 test1 样式设置给 easyui-window 的 headerCls 属性，却无效，观察当前 easyui-window 的 header 底部边框。
        <br /><br />
        <br />
        将 test2 样式设置给外层 easyui-panel 的 bodyCls 属性，是有效的，观察外层 easyui-panel 的 body 底部边框。
        <br />
        同时将 test2 样式设置给 easyui-window 的 bodyCls 属性，却无效，观察当前 easyui-window 的 body 底部边框。
        <br /><br />

        easyui-window 继承于 easyui-panel，按理来说，headerCls、bodyCls属性也应当同样有效，事实却不符。因此本扩展定位为“bug修复”。
        <br /><br />
        @if (loadJs)
        {
            <span style="color:red;" id="msg">已经添加 cls 扩展的引用</span><br />
            <a class="easyui-linkbutton" data-options="iconCls:'icon-reload'" href="/Window/clsDemo?loadJs=false">以不加载扩展js的方式刷新本页</a>
        }
        else
        { 
            <a class="easyui-linkbutton" data-options="iconCls:'icon-reload'" href="/Window/clsDemo?loadJs=true">以自动加载扩展js的方式刷新本页</a>
        }
    </div>
</div>